<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>打卡记录 - NexusGo</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "background": "#ffffff",
            "primary": "#000000",
            "secondary": "#666666",
            "border": "#eeeeee",
            "card": "#ffffff",
            "hover": "#f5f5f5",
          },
          fontFamily: {
            "display": ["Plus Jakarta Sans"]
          },
          borderRadius: {
            "DEFAULT": "0.5rem",
            "lg": "0.75rem",
            "xl": "1rem",
            "full": "9999px"
          },
        },
      },
    }
  </script>
<style>
    .material-symbols-outlined {
      font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    }
  </style>
</head>
<body class="font-display bg-background text-primary">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<header class="sticky top-0 z-50 flex h-16 w-full items-center justify-between border-b border-border bg-background/80 px-4 backdrop-blur-sm sm:px-6">
<a class="flex items-center gap-2" href="#">
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
<h1 class="text-xl font-bold">NexusGo</h1>
</a>
<div class="hidden items-center gap-6 sm:flex">
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">行程规划</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">灵感发现</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">社区</a>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center rounded-full size-9 hover:bg-hover">
<span class="material-symbols-outlined text-secondary">notifications</span>
</button>
<a class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9" href="#" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAan_zgBr5IngbAJQEgbOgKip4uIbNIuMSBM_bGjPLRdEa5POUTDoP8NuJDe0fBRdvzsdEoJMlh9CrOsm-ZnBQjdQHOKEh_z0kkj4SknfhwCPADMMIAs6c69u154olZvnGKEfITJYPUa3BiUqRblWRJD2Snjjui0vNUpZOD6RpvwfgtBvQih8NVin6CZd8iktU8KdpgjKn3iQMlIu16OTaCiqkKcYfEbHo3ZjvMThllSEg7TEYBxJolfiGaTG6OC5vXvHz_KIGLpQ");'></a>
</div>
</header>
<main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-8 md:flex-row md:gap-12">
<aside class="w-full md:w-64 md:flex-shrink-0">
<div class="sticky top-24">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-16" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZ0xznA2fnvF3shTmyGNZvYENX6yJFKBoBu-0VZZRPibh6BzRj13oOEjgvGdqIH9U-4YFNavZwRF3blFJEx8RlxG8D84fsrZzXBfBicsBUZeitdSGAGUgcSCwoer36RIQmS4ydRF1NmcGAAypQeBvnlJiFmCXm1-vUWoJUMXLJU9j2-j_7O8hUl19MBqupsWPO7zKO8RyU1sjPYIVVplTxhWKeV1IWKXge-HaaRLWhb09pr-qhYO6Fx3H56j5RyRfu8toMoawnbw");'></div>
<div>
<h2 class="text-xl font-bold">Alex Chen</h2>
<p class="text-sm text-secondary">查看并编辑您的个人资料</p>
</div>
</div>
<nav class="mt-4 flex flex-col gap-1">
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">person</span>
<span class="text-sm font-medium">个人信息</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">tune</span>
<span class="text-sm font-medium">旅行偏好</span>
</a>
<a class="flex items-center gap-3 rounded-md bg-hover px-3 py-2 font-medium text-primary" href="#">
<span class="material-symbols-outlined text-base">pin_drop</span>
<span class="text-sm">打卡记录</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">dynamic_feed</span>
<span class="text-sm font-medium">发布的帖子</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">collections_bookmark</span>
<span class="text-sm font-medium">收藏内容</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">delete</span>
<span class="text-sm font-medium">回收站</span>
</a>
</nav>
</div>
</div>
</aside>
<div class="flex-1">
<div class="flex flex-col gap-8">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold">打卡记录</h2>
<div class="flex gap-1 rounded-lg border border-border bg-hover p-1">
<button class="rounded-md px-4 py-1.5 text-sm font-medium text-secondary hover:bg-background/60">时间线视图</button>
<button class="rounded-md bg-background px-4 py-1.5 text-sm font-medium text-primary shadow-sm">地图视图</button>
</div>
</div>
<div class="aspect-[16/10] w-full overflow-hidden rounded-lg border border-border">
<div class="relative h-full w-full bg-[#f0f0f0]">
<div class="h-full w-full bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB2QkAPRjAlnRHKToG2U1QEQSTd8CX7oxXzJEouh1RAT3SWn3k7_Yf0cHyb5JrEHvs8ewdAPlIGfOxIbDfNxeDCh5CqltrpnZ1G6wpCUsoU0ETLXx0csT6c7oM5yC0Q9QYZ1_7eKy0LTe24RdqykefzR_NxdoQF-8OejX7kv8_5qVbC_xZcDJQMzIztO9NJud5OcCdzcn9YlZCKDpAUyQcsBBqY11AVPY-lH3ICn-Ozd0H0LmhlI2sjW6MxeBXhwcj-QOjDSdxK_w");'></div>
<div class="absolute bottom-4 right-4 flex flex-col gap-1">
<button class="flex size-9 items-center justify-center rounded-md border border-border bg-background shadow-sm hover:bg-hover">
<span class="material-symbols-outlined text-xl">add</span>
</button>
<button class="flex size-9 items-center justify-center rounded-md border border-border bg-background shadow-sm hover:bg-hover">
<span class="material-symbols-outlined text-xl">remove</span>
</button>
</div>
<div class="absolute" style="left: 45%; top: 40%;">
<div class="flex size-6 -translate-x-1/2 -translate-y-full cursor-pointer items-center justify-center rounded-full bg-primary ring-2 ring-background">
<span class="material-symbols-outlined text-sm text-background">location_on</span>
</div>
</div>
<div class="absolute" style="left: 35%; top: 20%;">
<div class="flex size-6 -translate-x-1/2 -translate-y-full cursor-pointer items-center justify-center rounded-full bg-primary ring-2 ring-background">
<span class="material-symbols-outlined text-sm text-background">location_on</span>
</div>
<div class="absolute bottom-full left-1/2 mb-3 w-64 -translate-x-1/2 transform rounded-lg border border-border bg-background shadow-lg">
<div class="aspect-video w-full">
<div class="h-full w-full rounded-t-lg bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBzssSkIetmQwTf92mjmyITh0t1IxL42gCSvO9DUP6w1cELTcMCIVRUwfVBA4Hgs22mTjNgsD81fSSNdsOtd62iuhr_USwas2UeOA3Q9xFJvRNstrIBMTruYpx_ogvk5i5hT9P2pLkChmkByZrk3WBRzkppUjODRaa5KL5A6vh22iOHV2vyqqaLHR0Mx2ZIiKNGqCMMDEuPae0bZrjTNHdXpnAuTpkowFxVObc870mD67R03XqrtJnmRGJLZptbTelUTzsKG2dwVQ");'></div>
</div>
<div class="p-3">
<h3 class="font-semibold">冰岛黄金圈</h3>
<p class="mt-1 text-sm text-secondary">冰川、瀑布和间歇泉，大自然鬼斧神工的杰作。看到了绚丽的北极光，此生无憾。</p>
</div>
<div class="absolute bottom-0 left-1/2 h-3 w-3 -translate-x-1/2 translate-y-1/2 rotate-45 border-b border-r border-border bg-background"></div>
</div>
</div>
<div class="absolute" style="left: 42%; top: 35%;">
<div class="flex size-6 -translate-x-1/2 -translate-y-full cursor-pointer items-center justify-center rounded-full bg-primary ring-2 ring-background">
<span class="material-symbols-outlined text-sm text-background">location_on</span>
</div>
</div>
<div class="absolute" style="left: 85%; top: 42%;">
<div class="flex size-6 -translate-x-1/2 -translate-y-full cursor-pointer items-center justify-center rounded-full bg-primary ring-2 ring-background">
<span class="material-symbols-outlined text-sm text-background">location_on</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>